<template>
  <div>
    <el-table :data="tableData"  border style="width: 100%;" >
      <!-- 这里对常规文本类型进行处理，对过滤出image和switch之后的字段进行循环绑定 -->
      <el-table-column
        v-for="item in tableLabel.filter(
          el => el.prop !== 'image' && el.prop !== 'status'
        )"
        :key="item.prop"
        :label="item.label"
        :width="item.width ? item.width : 180"
        align="center">
        <template slot-scope="scope">
          <span style="margin-left:10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <!-- 这里是对tableLableList列表中的字段进行过滤，处理image字段 -->
      <el-table-column
        v-for="item in tableLabel.filter(el => el.prop === 'image')"
        :key="item.prop"
        show-overflow-tooltip
        :label="item.label"
        :width="item.width ? item.width : 75"
        align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">
            <img
              :src="scope.row.image"
              alt=""
              style="width:100px;height:100px"
            />
          </span>
        </template>
      </el-table-column>

      <!-- 处理switch开关 -->
      <el-table-column
        v-for="item in tableLabel.filter(el => el.prop === 'status')"
        :key="item.prop"
        :label="item.label"
        :width="item.width ? item.width : 50"
        align="center">
        <template slot-scope="scope">
          <!-- switch开关：之所以disableed，是不希望在这里进行状态修改，而是通过编辑的方式提交post请求修改 -->
          <el-switch  v-model="scope.row.status"></el-switch>
        </template>
      </el-table-column>
      <!--数据操作列，可以根据实际情况进行逻辑处理 -->
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
<!--          <el-button size="mini"  @click="emitIndex(scope.$index, scope.row, '编辑')">编辑</el-button>-->
          <el-button size="mini" type="danger"  @click="emitIndex(scope.$index, scope.row, '删除')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
export default {
  name:'commonTable',
  props: {
    tableData: [], // 存放父组件传递过来的表数据
    tableLabel: [], // 存放父组件传递过来的表字段数据
    config:{}    // 配置项，比如表格每一页多少条数据，数据的加载状态,v-loading指令
  },
  data() {
    return{
      // 接收父组件传参

    }
  },
  methods: {
    emitIndex: function (scopeIndex, scopeRow, buttonName) {
      console.log(scopeRow);
      let option = {
        scopeIndex: scopeIndex,
        scopeRow: scopeRow,
        buttonName: buttonName
      }
      this.$emit('getTableData', option)
    },
    init: function (){
      console.log("tableData",this.tableData)
      console.log("tableDataList",this.tableLabel)
      console.log("config",this.config)
    }
  },
  created() {

  }
}
</script>
<style lang="scss" scoped>
</style>
